CSS in JS

スタイル記述方法の種類

テンプレートタグ

CSSからの/へのコピペ容易性が高い

とはいえネストが必要だったりする

エディタサポートが別途必要

各種サービスのシンタックスハイライトが効かないがち

オブジェクトリテラル

CSSと書きかたが違う

camelCase

疑似セレクタやメディアクエリですごい記法が要求されることも

JavaScriptネイティブ

変数とかで操作しやすい

静的解析する場合はできないかも……

CSS挿入タイミングでの分類

ランタイムあり

ブラウザでの実行時にJavaScriptを使ってCSSを挿入する

propsやstateに応じて自由にスタイルを操作できる

挿入処理が入ることでバンドルサイズが増加し、またそれを実行する計算コストがかかる

コンパイル時にJSソース中のスタイルを解析してCSSを生成する

パフォーマンスが改善されるはず

バンドラとの統合が必須になる (設定がさらにめんどくなる)

code:tsx

const Inline = () => <p style={{ color: "red" }}></p>;

👍

プレーンなオブジェクトで書ける

TypeScriptで型による補完やチェックが機能する

スコープがめちゃくそ狭い

この要素にしか効果がない

「本当にここだけに必要なスタイル」には向く

👎

表現力が低い

宣言ブロックの中身しか書くことができない

メディアクエリが使えない

グローバルスタイルが書けない

メンテナンス性が低い

JSのオブジェクト記法で書く必要があり、CSSからの移植に手間がかかる

CSSを書く必要がある

文法が異なるとはいえセマンティクスはCSS

code:tsx

const Styledjsx = () => {

return (

<div>

<p>styled-jsx</p>

<style jsx>

{`

p {

color: red;

}

@media (max-width: 600px) {

p:after {

content: "メディアクエリも使える！";

margin-inline-start: 1rem;

}

}

`}

</style>

<style global jsx>

{`

body {

font-family: serif;

}

`}

</style>

</div>

);

};

👍

表現力が十分にある

メディアクエリ書ける

スコープされる

テンプレートリテラルなのでCSSがそのまま書ける

直感的

👎

テンプレートリテラル

別途拡張を入れないとシンタックスハイライトすら効かない

型チェックが効かない